<template>
    <div class="by-gongzuo">
        <section class="header" @click="centerDialogVisible = true">
            <i class="iconfont icon-xinzeng"></i>增加人员
        </section>
        <section>
            <div class="list" v-for="item in wxuserlist" :key="item.value">
                <p>保养人员：{{item.sysPerson.personName}}</p>
                <p>保养开始时间：{{item.rmStarttime}}</p>
                <p>保养结束时间：{{item.rmFinishtime}}</p>
            </div>
        </section>
        <el-dialog title="增加人员" :visible.sync="centerDialogVisible" width="90%" center>
            <div class="dialogBox">
                <div><span>人员：</span><input type="text" name="" id="trigger" v-model="form.pName" @focus="stopFocus"></div>
                <div><span>开始：</span><input type="text" ref="date1" placeholder="日期和时间选择特效" data-lcalendar="2000-01-01,2029-12-31" @focus="stopFocus" v-model="form.rmStarttime" /></div>
                <div><span>完成：</span><input type="text" ref="date2" placeholder="日期和时间选择特效" data-lcalendar="2000-01-01,2029-12-31" @focus="stopFocus" v-model="form.rmFinishtime" /></div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addwxuser()">确 定</el-button>
            </span>
        </el-dialog>
        <button type="button" class="btn btn-block btn-primary" @click="commit">提交</button>
    </div>
</template>

<script>
import MobileSelect from 'mobile-select'
export default {
    data() {
        return {
            centerDialogVisible: false,
            calendardatetime: null,
            mobileSelect: null,
            name: '',
            wxuserlist: [],
            form: {
                pName: '',
                rmId: this.$route.query.id,
                rmUser: '',
                rmType: 1
            },
            personsList: []
        };
    },
    mounted() {
        this.getUserlist()
        this.getPersons()

    },
    watch: {
        'centerDialogVisible'(value) {
            // this.dialogNum++
            var that = this
            if (value && !this.calendardatetime) {
                this.$nextTick(() => {
                    this.calendardatetime = new lCalendar()
                    this.calendardatetime2 = new lCalendar()
                    this.calendardatetime.init({
                        'trigger': this.$refs.date1,
                        'type': 'datetime'
                    });
                    this.calendardatetime2.init({
                        'trigger': this.$refs.date2,
                        'type': 'datetime'
                    });
                })
            }
            if (value && !this.mobileSelect) {
                this.$nextTick(() => {
                    this.mobileSelect = new MobileSelect({
                        trigger: "#trigger",
                        title: "单项选择",
                        wheels: [
                            {
                                data: that.personsList
                            }
                        ],
                        keyMap: {
                            id: 'personId',
                            value: 'personName'
                        },
                        callback: function (indexArr, data) {
                            that.form.rmUser = data[0].personId
                            that.form.pName = data[0].personName
                            // console.log(data)
                        }
                    })
                })
            }
        }
    },
    methods: {
        stopFocus() {
            document.activeElement.blur();
        },
        getUserlist() {
            this.$api.weixiu.wxuserlist({
                rmId: this.$route.query.id,
                rmType: 1
            }).then(res => {
                if (res.success) {
                    this.wxuserlist = res.data
                }
            });
        },
        //添加保养工作量
        addwxuser() {
            console.log(this.form)
            this.$api.weixiu.addwxuser(this.form).then(res => {
                if (res.success) {
                    console.log(11)
                    this.centerDialogVisible = false
                    this.getUserlist()
                    this.$$tip({
                        content: '添加成功'
                    })
                }
            });
        },
        //人员列表
        getPersons() {
            this.$api.weixiu.allperson({
                equipId: this.$route.query.equipId
            }).then(res => {
                if (res.success) {
                    this.personsList = res.data
                }
            });
        },
        commit(){
            
        }
    }
};
</script>

<style>
</style>
